<template>
  <div class="app-content dk-home-diy" style="--navbar-height: 0">
    <dk-page-diy ref="diy" :loading="loading" right-aside-width="500px" left-aside-width="300px" type="min">
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button type="success" @click="onClick()">配置</el-button>
      <el-button type="danger" @click="diy.clear()">清除</el-button>
      <el-button type="warning" @click="diy.showDiyCloud(pageName)">模板中心</el-button>
    </dk-page-diy>
    <dk-form ref="formRef" :is-dialog="true" :form-url="{ url: '/gs_gold/admin.page/getForm?name=' + pageName, method: 'get' }" @submit="submit" />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getDiy, setDiy } from '@/api/page'
import rules from '@/components/rules'

defineOptions({
  name: 'ArticlePage'
})
const pageName = 'article'
const diy = ref()
const loading = ref(true)

const formRef = ref()
const onClick = () => {
  formRef.value.show()
}

const submit = (form: any) => {}
const save = () => {
  const diyData = diy.value.get()
  setDiy(diyData, pageName).then((res) => {})
}
const init = () => {
  getDiy(pageName).then((res) => {
    diy.value.set(res.data)
    loading.value = false
  })
}

onMounted(() => {
  for (const menu of [rules.common, rules.article]) {
    diy.value.addMenu(menu)
    diy.value.addComponent(menu.list)
  }
  init()
})
</script>

<style lang="scss">
.dk-home-diy {
  .dk-page-diy ._fc-l,
  .dk-page-diy ._fc-m,
  .dk-page-diy ._fc-r {
    height: calc(100vh - 120px) !important;
  }
}
</style>
